<!-- 音标专练练习 -->

<template>
	<AppHeader :title="title" :banAnimate="true" backgroundColor="#ffffff" titleColor="#000000"
		@leftClickEvent="onClickLeft()">
	</AppHeader>
	<div class="container-practice" v-if="practoceList && practoceList.length">
		<div class="container-height"></div>
		<div class="practice-top">
			<div class="practice-top-currentPage">{{ currentPage }}<span>/{{ practoceList.length }}</span></div>
			<div class="practice-top-slider">
				<Slider v-model="currentPage" :disabled="true" min="1" :max="practoceList.length || 1000"
					active-color="#0CB76C">
				</Slider>
			</div>
			<div class="practice-top-switch" @click="switchManual">
				<div :class="active == 1 ? 'active' : ''">自动</div>
				<div :class="active == 2 ? 'active' : ''">手动</div>
			</div>
		</div>
		<div class="practice-img" v-if="practoceList.length">
			<img :src="practoceList[currentPage - 1].wordPic" />
		</div>
		<div class="practice-context" v-if="practoceList.length">
			<div class="practice-context-title">{{ practoceList[currentPage - 1].words }}</div>
			<div class="practice-context-context" v-if="practoceList[currentPage - 1].symbol">
				[{{ practoceList[currentPage - 1].symbol }}]</div>
			<div class="practice-context-context">{{ practoceList[currentPage - 1].pretations }}</div>
			<div class="practice-context-bottom">
				<div>例句</div>
				<div>{{ practoceList[currentPage - 1].sentences }}</div>
				<!-- <div>He looks nervous.</div> -->
			</div>
		</div>

		<div class="practiceFractionBox">
			<div class="practiceFraction" v-if="practoceList[currentPage - 1].sourceObj && recordingStatus=='ended'">
				<div :class="autoColor(practoceList[currentPage - 1].sourceObj.total_score)">
					{{
						Math.round(practoceList[currentPage - 1].sourceObj.total_score) }}分
				</div>
				<img src="@/assets/phoneticPractice/scoreSrcRed.png"
					v-if="practoceList[currentPage - 1].sourceObj.total_score<60&&recordingStatus=='ended'" />
				<img src="@/assets/phoneticPractice/scoreSrcYellow.png"
					v-if="(practoceList[currentPage - 1].sourceObj.total_score>60&&practoceList[currentPage - 1].sourceObj.total_score<80)&&recordingStatus=='ended'" />
				<img src="@/assets/phoneticPractice/scoreSrcGreed.png"
					v-if="practoceList[currentPage - 1].sourceObj.total_score>80&&recordingStatus=='ended'" />
				<div class="context">
					<div class="label">完成度</div>
					<div :class="autoColor(practoceList[currentPage - 1].sourceObj.accuracy_score)">{{
						Math.round(practoceList[currentPage - 1].sourceObj.accuracy_score) }}</div>
				</div>
				<div class="context">
					<div class="label">流利度</div>
					<div :class="autoColor(practoceList[currentPage - 1].sourceObj.fluency_score)">{{
						Math.round(practoceList[currentPage - 1].sourceObj.fluency_score) }}</div>
				</div>
				<div class="context">
					<div class="label">准确度</div>
					<div :class="autoColor(practoceList[currentPage - 1].sourceObj.integrity_score)">{{
						Math.round(practoceList[currentPage - 1].sourceObj.integrity_score) }}</div>
				</div>
			</div>

		</div>
		<div class="practice-button">
			<!-- v-if="active == 2" -->
			<div class="wordsVoice" v-if="active == 2">
				<img @click="onlyPlayAudio" :src="playImgSrc" />
			</div>
			<!-- 弹性盒占位 -->
			<div class="wordsVoice" v-else>
			</div>
			<div class="wordsPlay" v-if="active == 2">
				<!-- @click="tapeClick" -->
				<div class="circle-container" v-if="recordingStatus == 'recording'">
					<svg class="circle-progress" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
						<circle class="circle-bg" cx="18" cy="18" r="16" fill="none" stroke="#ffffff"
							stroke-width="1" />
						<circle class="circle" cx="18" cy="18" r="16" fill="none" stroke="#0CB76C" stroke-width="1"
							stroke-dasharray="100.48" stroke-dashoffset="100.48" />
					</svg>
					<img :src="tapeImgSrc" style="position: absolute;" />
				</div>
				<img src="@/assets/phoneticPractice/录音@3x.png" v-if="recordingStatus != 'recording'"
					@click="tapeClick" />
			</div>
			<div class="wordsPlay" v-if="active == 1">
				<div class="circle-container" v-if="recordingStatus == 'recording'">
					<svg class="circle-progress" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
						<circle class="circle-bg" cx="18" cy="18" r="16" fill="none" stroke="#ffffff"
							stroke-width="1" />
						<circle class="circle" cx="18" cy="18" r="16" fill="none" stroke="#0CB76C" stroke-width="1"
							stroke-dasharray="100.48" stroke-dashoffset="100.48" />
					</svg>
					<img :src="tapeImgSrc" style="position: absolute;" />
				</div>
				<div class="circle-container" v-if="recordingStatus == 'playing'">
					<svg class="circle-progress" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
						<circle class="circle-bg" cx="18" cy="18" r="16" fill="none" stroke="#ffffff"
							stroke-width="1" />
						<circle class="circle1" cx="18" cy="18" r="16" fill="none" stroke="#0CB76C" stroke-width="1"
							stroke-dasharray="100.48" stroke-dashoffset="100.48" />
					</svg>
					<img :src="tapeImgSrc" style="position: absolute;" />
				</div>
			</div>
			<div class="myVoice">
				<!-- recordingStatus=='ended'|| -->
				<div class="circle-container1"
					v-if="practoceList[currentPage - 1].video && active == 2 && isPlayMyVideo">
					<svg class="circle-progress" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">

						<circle :class="isPlayMyVideo ? 'circle1' : ''" cx="18" cy="18" r="16" fill="none"
							stroke="#0CB76C" stroke-width="1" stroke-dasharray="100.48" stroke-dashoffset="100.48" />
					</svg>
					<img src="@/assets/phoneticPractice/播放@3x.png" style="position: absolute;" />
				</div>
				<img src="@/assets/phoneticPractice/播放@3x.png"
					v-if="practoceList[currentPage - 1].video && active == 2 && !isPlayMyVideo"
					@click="playRecording" />
				<div @click="completeClick" class="practice-button-complete"
					v-if="active == 2 && recordingStatus == 'recording'">完成录音</div>
			</div>
		</div>
		<!-- 填充盒子 -->
		<div class="fillBox"></div>
		<div class="practice-bottom" v-show="active == 2">
			<div @click="previous">上一个</div>
			<div @click="next"
				v-show="practoceList[currentPage - 1].video || (active == 2 && recordingStatus == 'ended')">
				下一个</div>
		</div>
		<div class="practice-bottom" v-show="active == 1">
			<img class="practice-bottom-img" :src="bottomImgSrc" @click="automaticPlay" />
		</div>
	</div>
	<Overlay :show="automaticOverlay">
		<div class="automaticOverlay">
			<div class="automaticOverlay-context" v-if="active == 1">手动模式可重读跟读，需要您自主操作进行跟读流程,确定切换吗?</div>
			<div class="automaticOverlay-context" v-if="active == 2">关闭手动模式将自动进行跟读流程，确认关闭吗?</div>
			<div class="automaticOverlay-button">
				<div @click="automaticOverlay = false">取消</div>
				<div @click="switchAutomatic">确定</div>
			</div>
		</div>
	</Overlay>
	<van-overlay :show="recordingStatus == 'evaluating'">
		<div class="loading">
			<van-loading type="spinner" />
			<div class="text">评分中...</div>
		</div>
	</van-overlay>
	<audio ref="audioElement" :src="audioSrc" @ended="playEnded"></audio>
	<audio ref="dingAudioElement" :src="dingAudioSrc"></audio>
</template>

<script setup>
	import {
		Slider,
		Overlay
	} from "vant";
	import AppHeader from '../../components/AppHeader.vue'
	import {
		useRouter,
		useRoute
	} from 'vue-router'
	import {
		onMounted,
		reactive,
		ref,
		toRefs,
		nextTick,
		watch,
		onUnmounted
	} from 'vue'
	import {
		showToast,
	} from "vant";

	import {
		uploadFiles,
	} from '@/api/common'
	import {
		getUserPlaySetting,
		setUserPlaySetting
	} from '@/api/user'
	import {
		getPhoneticPracticeWords,
		savePhoneticPracticeScore
	} from '@/api/phoneticPractice'

	import IatRecorder from '@/utils/iatRecorder'
	const router = useRouter()
	const route = useRoute()
	const onClickLeft = () => {
		router.go(-1)
	}
	const currentPage = ref(1)
	const active = ref(1)
	const automaticOverlay = ref(false)
	const title = route.query.title;
	const state = reactive({
		practoceList: [],
		sourceObj: {}
	})
	const playImgSrc = ref()
	const tapeImgSrc = ref()
	const bottomImgSrc = ref()
	const scoreSrc = ref()
	const audioElement = ref(null)
	const audioPlayer = ref(null)
	const audioSrc = ref('')
	const recordingStatus = ref(
		'notStarted') //录音状态  playing语音播放中 playEnded语音播放结束 notStarted未开始  recording 录音中  evaluating评测中  ended 已结束
	let iatRecorder = new IatRecorder()
	let mediaRecorder;
	let recordedChunks = [];
	let totalTime = 0

	watch(currentPage, (newVal) => {
		if (state.practoceList.length) {
			iatRecorder = new IatRecorder({
				text: state.practoceList[newVal - 1].words
			})
			playAudio()
		}
	}, {
		immediate: true
	})

	watch(recordingStatus, (newVal) => {
		console.log('录音状态', newVal)
	})



	const initImg = async () => {
		if (active.value == 1) {
			const tapeModule = await import('@/assets/phoneticPractice/读@3x.png')
			tapeImgSrc.value = tapeModule.default
			const bottomModule = await import('@/assets/phoneticPractice/形状@3x.png')
			bottomImgSrc.value = bottomModule.default
		} else {
			const playModule = await import('@/assets/phoneticPractice/声音@3x.png')
			playImgSrc.value = playModule.default
			const tapeModule = await import('@/assets/phoneticPractice/录音@3x.png')
			tapeImgSrc.value = tapeModule.default
		}
	}

	//获取用户设置
	const getUserSetting = async () => {
		getUserPlaySetting().then(res => {
			if (res.code == 1) {
				active.value = res.data.symbol_set
				automaticPlay()
			}
		})
	}
	//设置用户设置
	const setUserSetting = () => {
		if (active.value == 2) {
			active.value = 1
		} else {
			active.value = 2
		}
		setUserPlaySetting({
			symbol_set: active.value
		}).then(res => {
			if (res.code == 1) {
				getUserSetting()
			}
		})
	}
	const switchAutomatic = async () => {
		const bottomModule = await import('@/assets/phoneticPractice/形状@3x.png')
		bottomImgSrc.value = bottomModule.default
		setUserSetting()
		automaticOverlay.value = false
	}
	//修改用户配置状态
	const switchManual = () => {
		// if (recordingStatus.value == 'recording') {
		// 	return showToast('录音中无法切换状态')
		// }
		automaticOverlay.value = true
		isPlay.value = 'stop'
		recordingStatus.value = 'notStarted'
		if (mediaRecorder) {
			stopRecording()
		}
		if (iatRecorder) {
			iatRecorder.stop()
		}
		clearTimeout(setTimeoutVal.value)
		setTimeoutVal.value = null
		clearTimeout(recordingTimeoutVal.value)
		recordingTimeoutVal.value = null
	}

	//获取音标专练单词列表
	const getMissionAnswerDetail = () => {
		getPhoneticPracticeWords({
			versionId: route.query.versionId
		}).then(res => {
			state.practoceList = res.data
			iatRecorder = new IatRecorder({
				text: state.practoceList[0].words
			})
			playAudio()
		})

	}

	const autoColor = (num) => {
		if (num < 60) {
			return 'autoRed' //#FA192C
		} else if (num > 60 && num < 80) {
			return 'autoYellow' //#FF9917
		} else if (num > 80) {
			return 'autoGreed' //#0CB76C
		}
	}

	//保存跟读信息
	const saveFollow = async () => {
		let obj = state.practoceList[currentPage.value - 1]
		console.log(obj)
		savePhoneticPracticeScore({
			versionId: route.query.versionId,
			wId: obj.wId,
			score: Math.round(obj.sourceObj.total_score),
			integrity: Math.round(obj.sourceObj.integrity_score),
			fluency: Math.round(obj.sourceObj.fluency_score),
			accuracy: Math.round(obj.sourceObj.accuracy_score),
			video: obj.video
		}).then(res => {
			setTimeout(() => {
				if (active.value == 1 && isPlay.value == 'play') { //自动
					next()
				}
			}, 1000)
		})
	}

	function fileToBase64(file) {
		return new Promise((resolve, reject) => {
			const reader = new FileReader();
			reader.readAsDataURL(file);
			reader.onload = () => resolve(reader.result);
			reader.onerror = error => reject(error);
		});
	}
	const isOnlyPlayAudio = ref(false)
	// 只播放音频不触发录音
	const onlyPlayAudio = async () => {
		if (recordingStatus.value != 'ended') {
			return
		}
		isOnlyPlayAudio.value = true
		const playModule = await import('@/assets/phoneticPractice/话筒效果-2.gif')
		playImgSrc.value = playModule.default
		audioSrc.value = state.practoceList[currentPage.value - 1].wordFile
		// recordingStatus.value = 'playing'
		const tapeModule = await import('@/assets/phoneticPractice/读@3x.png')
		tapeImgSrc.value = tapeModule.default

		setTimeout(async () => {
			await audioElement.value.play()
		}, 1000)
	}

	// 播放音频
	const playAudio = async () => {
		isOnlyPlayAudio.value = false
		const playModule = await import('@/assets/phoneticPractice/话筒效果-2.gif')
		playImgSrc.value = playModule.default
		audioSrc.value = state.practoceList[currentPage.value - 1].wordFile
		recordingStatus.value = 'playing'
		const tapeModule = await import('@/assets/phoneticPractice/读@3x.png')
		tapeImgSrc.value = tapeModule.default

		setTimeout(async () => {
			await audioElement.value.play()
		}, 1000)
	}

	//播放结束
	const playEnded = async () => {
		const playModule = await import('@/assets/phoneticPractice/声音@3x.png')
		playImgSrc.value = playModule.default
		if (isOnlyPlayAudio.value) {
			// recordingStatus.value = 'playEnded'
			return false
		}

		isPlayMyVideo.value = false //结束自己的音频播放
		if (active.value == 1 && isPlay.value == 'play') {
			tapeClick()
		} else if (active.value == 1 && isPlay.value == 'stop') {
			recordingStatus.value = 'notStarted'
		}
		if (active.value == 2 && !state.practoceList[currentPage.value - 1].video) {
			tapeClick()
		}
	}
	//上一个
	const previous = () => {
		if (currentPage.value == 1) {
			return showToast('已经是第一个了')
		}
		if (currentPage.value) currentPage.value--
	}
	// 下一个
	const next = async () => {
		recordingStatus.value = 'notStarted'
		recordedChunks = []
		//提交任务
		if (currentPage.value == state.practoceList.length) {
			let use_time = Math.floor((Date.now() - totalTime) / 1000);
			router.push({
				path: '/phoneticPractice/submitTask',
				query: {
					title: title,
					versionId: route.query.versionId,
					use_time: use_time
				}
			})
		} else {
			currentPage.value++
		}
	}
	const setTimeoutVal = ref()
	const recordingTimeoutVal = ref()
	const dingAudioSrc = ref(null)
	const dingAudioElement = ref(null)
	//语音识别
	const tapeClick = () => {
		dingAudioSrc.value = "https://oss.bigchun.com/file/ding.mp3"
		dingAudioElement.value.play().catch((err) => {
			dingAudioElement.value.play()
		})
		//分数清除
		if (state.practoceList[currentPage.value - 1].sourceObj) {
			state.practoceList[currentPage.value - 1].sourceObj = null
		}
		//音频清除
		if (state.practoceList[currentPage.value - 1].video) {
			state.practoceList[currentPage.value - 1].video = null
			state.practoceList[currentPage.value - 1].fullVideo = null
		}
		recordingTimeoutVal.value = setTimeout(async () => {
			const tapeModule = await import('@/assets/phoneticPractice/语音动画效果01.gif')
			tapeImgSrc.value = tapeModule.default
			recordingStatus.value = 'recording'
			startRecording() //录音
			iatRecorder.start()
		}, 1000)
		setTimeoutVal.value = setTimeout(async () => {
			completeClick()
		}, 6000);
	}

	const sourceTimeoutVal = ref()
	const completeTimeoutVal = ref()
	//完成识别
	const completeClick = async () => {
		clearTimeout(setTimeoutVal.value)
		setTimeoutVal.value = null
		clearTimeout(recordingTimeoutVal.value)
		recordingTimeoutVal.value = null

		recordingStatus.value = 'evaluating'
		const tapeModule = await import('@/assets/phoneticPractice/录音@3x.png')
		tapeImgSrc.value = tapeModule.default
		iatRecorder.stop()
		stopRecording() //结束录音
		completeTimeoutVal.value = setTimeout(async () => {
			recordingStatus.value = 'ended'
			if (iatRecorder.getScoreObj()) {
				state.practoceList[currentPage.value - 1].sourceObj = iatRecorder.getScoreObj()
				if (state.practoceList[currentPage.value - 1].sourceObj.total_score == 0) {
					sourceTimeoutVal.value = setTimeout(() => {
						againRead()
					}, 1000)
					return showToast('请提高朗读音量,以免影响评分')
				}
				// console.log( mediaRecorder.mimeType)
				const blob = new Blob(recordedChunks, {
					type: mediaRecorder.mimeType
				});
				var file = new File([blob], state.practoceList[currentPage.value - 1].words + '.MP3', {
					type: 'audio/x-mpeg',
					lastModified: Date.now()
				});
				// console.log(recordedChunks,8888888)
				// console.log(file,999999)
				let formData = new FormData();
				formData.append('file', file);
				uploadFiles(formData).then(res => {
					state.practoceList[currentPage.value - 1].video = res.data.url
					state.practoceList[currentPage.value - 1].fullVideo = res.data.fullurl
				})
				saveFollow()
			} else {
				showToast('录音解析失败')
				// if (active.value == 1) { //自动
				// 	nextTick(async () => {
				// 		tapeClick()
				// 	})
				// }
				state.practoceList[currentPage.value - 1].sourceObj = null
			}
		}, 2000);

	}

	// 重读
	const againRead = () => {
		state.practoceList[currentPage.value - 1].sourceObj = null
		recordingStatus.value = 'notStarted'
		playAudio()
	}

	const stream = ref()

	const startRecording = async () => {

		try {
			recordedChunks = []
			stream.value = await navigator.mediaDevices.getUserMedia({
				audio: true
			});
			mediaRecorder = new MediaRecorder(stream.value);

			mediaRecorder.addEventListener('dataavailable', event => {
				recordedChunks.push(event.data);
			});

			mediaRecorder.start();
		} catch (error) {
			console.error('获取媒体流错误:', error);
		}
	};

	const stopRecording = () => {
		state.practoceList[currentPage.value - 1].recordedChunks = recordedChunks
		if (mediaRecorder) {
			mediaRecorder.stop();
		}
	};


	const isPlayMyVideo = ref(false) //是否播放自己的音频
	const playRecording = async () => {
		audioSrc.value = state.practoceList[currentPage.value - 1].fullVideo
		isPlayMyVideo.value = true
		setTimeout(async () => {
			await audioElement.value.play()
		}, 1000)
	}

	const blobToBase64 = (blob) => {
		return new Promise((resolve, reject) => {
			const reader = new FileReader();
			reader.readAsDataURL(blob);
			reader.onload = () => resolve(reader.result);
			reader.onerror = reject;
		});
	};


	const isPlay = ref('stop') //自动播放状态
	const automaticPlay = async () => {
		// if (recordingStatus.value == 'recording') {
		// 	return showToast('录音中无法切换状态')
		// }
		if (isPlay.value == 'stop') {
			const bottomModule = await import('@/assets/phoneticPractice/暂停@3x.png')
			bottomImgSrc.value = bottomModule.default
			isPlay.value = 'play'
			if (state.practoceList[currentPage.value - 1] && !state.practoceList[currentPage.value - 1].video) {
				playAudio()
			}
			if (state.practoceList[currentPage.value - 1] && state.practoceList[currentPage.value - 1].video) {
				next()
			}
		} else {
			const bottomModule = await import('@/assets/phoneticPractice/形状@3x.png')
			bottomImgSrc.value = bottomModule.default
			isPlay.value = 'stop'
			recordingStatus.value = 'notStarted'
			stopRecording() //结束录音
			iatRecorder.stop()
			clearTimeout(setTimeoutVal.value)
			setTimeoutVal.value = null
			clearTimeout(recordingTimeoutVal.value)
			recordingTimeoutVal.value = null
		}
	}

	onMounted(async () => {
		totalTime = Date.now();
		initImg()
		getMissionAnswerDetail()
		getUserSetting()
	})

	onUnmounted(() => {
		if (mediaRecorder) {
			stopRecording() //结束录音
		}
		if (stream.value) {
			stream.value.getTracks().forEach(track => track.stop())
		}
		if (iatRecorder) {
			iatRecorder.stop()
			iatRecorder.trackStop()
		}
		clearTimeout(setTimeoutVal.value)
		clearTimeout(sourceTimeoutVal.value)
		clearTimeout(completeTimeoutVal.value)
		clearTimeout(recordingTimeoutVal.value)
	})

	const {
		practoceList,
		sourceObj
	} = toRefs(state)
</script>

<style scoped lang="scss">
	.loading {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		height: 100%;
		font-size: 18px;

		.text {
			margin-left: 10px;
		}
	}

	.circle-container {
		width: 70px;
		/* 容器大小，根据需要调整 */
		height: 70px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.circle-container1 {
		width: 40px;
		/* 容器大小，根据需要调整 */
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.circle-progress {
		width: 100%;
		height: 100%;
	}

	.circle-bg {
		stroke: #FFFFFF;
		/* 背景圆线条颜色 */
	}

	.circle {
		/* 动画定义 */
		animation: progress 5s ease-out forwards;
	}

	.circle1 {
		/* 动画定义 */
		animation: progress 2s ease-out forwards;
	}

	.circle2 {
		/* 动画定义 */
		animation: progress 1s ease-out forwards;
	}


	@keyframes progress {
		0% {
			stroke-dashoffset: 100.48;
			/* 初始时，线条完全不可见 */
		}

		100% {
			stroke-dashoffset: 0;
			/* 结束时，线条完全可见 */
		}
	}

	.fillBox {
		height: 120px;
	}

	.container-practice {
		// display: flex;
		// flex-direction: column;
		//    align-items: center;
		height: 100%;
		text-align: center;

		.container-height {
			height: 46px;
		}

		.practice-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 10px;

			.practice-top-currentPage {
				font-size: 16px;
				color: #0CB76C;

				span {
					color: #8E8E8E;
				}
			}

			.practice-top-slider {
				flex: 1;
				margin: 0 10px;

			}

			.practice-top-switch {
				border-radius: 12px;
				font-size: 12px;
				background: #0CB76C;
				display: flex;

				div {
					width: 36px;
					height: 100%;
					color: #FFFFFF;
					text-align: center;
					line-height: 22px;
				}

				.active {
					color: #0CB76C;
					border: 1px solid #0CB76C;
					background: #FFFFFF;
					border-radius: 12px;
				}
			}
		}

		.practice-img {
			height: 185px;

			img {
				width: 320px;
				height: 180px;
			}

			margin: 10px 0 10px 0;
		}

		.practice-context {
			font-size: 14px;
			color: #8E8E8E;
			display: flex;
			flex-direction: column;
			align-items: center;

			.practice-context-title {
				color: #333333;
				font-size: 32px;
				line-height: 45px;

			}

			.practice-context-context {
				margin-top: 10px;
			}

			.practice-context-bottom {
				margin-top: 20px;
				padding: 10px;
				display: flex;
				flex-direction: column;
				align-items: center;

				div {
					white-space: pre-line;
				}
			}

		}

		.practiceFractionBox {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding: 0 20px;
			margin-top: 10px;

			.practiceFraction {
				display: inline-block;
				font-size: 28px;

				img {
					width: 55px;
					height: 12px;
					margin-bottom: 6px;
				}

				.context {
					margin-top: 5px;
					display: flex;
					align-items: center;
					color: #8E8E8E;
					font-size: 12px;

					.lebel {
						margin-right: 6px;
					}
				}
			}
		}


		.practice-button {
			height: 52px;
			margin-top: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 20px 20px;
			position: fixed;
			width: 100%;
			bottom: 28px;
			box-sizing: border-box;
			background-color: #FFFFFF;

			.wordsVoice {
				flex: 1;
				text-align: center;
				display: flex;
				justify-content: center;

				img {
					width: 26px;
					height: 20px;
				}
			}

			.wordsPlay {
				flex: 1;
				text-align: center;
				display: flex;
				justify-content: center;

				img {
					width: 52px;
					height: 52px;
				}
			}

			.myVoice {
				flex: 1;
				text-align: center;
				display: flex;
				justify-content: center;

				img {
					width: 26px;
					height: 26px;
				}
			}

			.practice-button-complete {
				// margin-right: 68px;
				font-size: 16px;
				color: #0CB76C;

			}

		}

		.practice-bottom {
			position: fixed;
			width: 100%;
			bottom: 0;
			height: 28px;
			background: #E7F8F0;
			color: #0CB76C;
			font-size: 12px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 28px;

			div:nth-child(1) {
				margin-left: 20px;
			}

			div:nth-child(2) {
				margin-right: 20px;
			}

			.practice-bottom-img {
				width: 18px;
				height: 18px;
				margin-left: 20px;
			}
		}




	}

	.van-overlay {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		z-index: 200;

		.initialImg {
			width: 375px;
			height: 260px;
		}

		.initialDiv {
			width: 102px;
			height: 32px;
			line-height: 32px;
			text-align: center;
			font-size: 12px;
			border: 1px solid #FFFFFF;
			color: #FFFFFF;
			border-radius: 18px;
			position: relative;
			top: 30px;
		}
	}

	.automaticOverlay {
		width: 345px;
		height: 184px;
		background: #FFFFFF;
		border-radius: 15px;
		color: #333333;
		font-size: 16px;
		line-height: 32px;

		.automaticOverlay-context {
			margin: 30px 20px;
		}

		.automaticOverlay-button {
			margin: 0 20px 30px 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			div {
				width: 135px;
				height: 40px;
				line-height: 40px;
				text-align: center;
			}

			div:nth-child(1) {
				border: 1px solid #8E8E8E;
				border-radius: 22.5px;
				font-size: #333333;
			}

			div:nth-child(2) {
				border-radius: 22.5px;
				color: #FFFFFF;
				background: linear-gradient(to left, #29F19C, #02A1F9);
			}
		}

	}

	::v-deep .van-slider__button {
		display: none !important;
	}

	.autoRed {
		color: #FA192C !important;
	}

	.autoYellow {
		color: #FF9917 !important;
	}

	.autoGreed {
		color: #0CB76C !important;
	}
</style>